<template>
	<view class="device-detail-page">
		<view class="page-scroll">
			<view class="header-box">
				<u-subsection :list="list" :current="current"></u-subsection>
			</view>
			<!-- 参数/性能列表 -->
			<!-- 		<view class="card list-card" style="margin-top: 120rpx;">
				<view class="list-header">
					<text class="lh-title">设备详情</text>
					<text class="lh-sub">更新时间：{{ device.updateTime }}</text>
				</view>
				<view class="param-list">
					<view class="param-row">
						<view class="param-left">
							<text class="param-name">设备ID</text>
						</view>
						<view class="param-right">
							<text class="param-value">{{ device.deviceId }}</text>
						</view>
					</view>
					<view class="param-row">
						<view class="param-left">
							<text class="param-name">设备IMEI</text>
						</view>
						<view class="param-right">
							<text class="param-value">{{ device.imei }}</text>
						</view>
					</view>
					<view class="param-row">
						<view class="param-left">
							<text class="param-name">设备名称</text>
						</view>
						<view class="param-right">
							<text class="param-value">{{ device.deviceName }}</text>
						</view>
					</view>
					<view class="param-row">
						<view class="param-left">
							<text class="param-name">设备地址</text>
						</view>
						<view class="param-right">
							<text class="param-value">{{ device.deviceAddr }}</text>
						</view>
					</view>
					<view class="param-row">
						<view class="param-left">
							<text class="param-name">设备是否绑定</text>
						</view>
						<view class="param-right">
							<text
								class="param-value">{{ device.isBound === '0'?'未绑定':isBound==='1'?'已绑定':'已注销'  }}</text>
						</view>
					</view>
				</view>
			</view> -->
			<!-- 参数/性能列表 -->
			<view class="card list-card">
				<view class="list-header">
					<text class="lh-title">{{list[type]}}</text>
					<text class="lh-sub">更新时间：{{ device.updateTime }}</text>
				</view>
				<view class="param-list">
					<view class="param-row" v-for="(row, idx) in paramRows" :key="idx">
						<view class="param-left">
							<text class="param-name">{{ row.name }}</text>
							<text class="param-note">（{{ row.note }}）</text>
						</view>
						<view class="param-right">
							<text class="param-value">{{ row.value }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 备注 -->
			<!-- 			<view class="card remark-card">
				<text class="remark-title">备注：</text>
				<text class="remark-text">{{ device.remark || '暂无备注'}}</text>
			</view> -->
			<view style="height: 120rpx;"></view>
		</view>
	</view>
</template>

<script>
	import {
		deviceDetailApi,
		deviceDeleteApi,
		paramLogListApi,
		levelLogListApi,
		alarmLogListApi
	} from '@/api/index.js';
	import {
		parseJSONSafe
	} from '@/utils/jsonUtil';
	export default {
		data() {
			return {
				list: ['设备参数日志', '设备水位日志', '设备报警日志'],
				current: 0,
				deviceState: {
					0: '离线',
					1: '在线',
					2: '缺水',
					3: '异常',
				},
				statusColor: {
					0: 'red',
					1: 'green',
					2: 'orange',
					3: 'red',
				},
				pageHeight: '700px',
				showDelete: false,
				device: {},
				deviceId: "",
				type: 0,
				searchData: {
					pageNum: 1,
					pageSize: 10,
					deviceId: undefined,
					orderByColumn: "create_time",
					isAsc: "desc"
				}
			};
		},
		computed: {

		},
		mounted() {

		},
		onLoad(options) {
			console.log(options, 'options');
			if (options.deviceId) {
				this.current = Number(options.type);
				this.deviceId = options.deviceId;
				this.getLogList();

			}
		},
		onShow() {
			// this.deviceDetail(this.deviceId);
		},
		methods: {
			async getLogList() {
				let api
				if (this.current === 1) {
					api = paramLogListApi
				} else if (this.current === 2) {
					api = alarmLogListApi
				} else {
					api = levelLogListApi
				}
				this.searchData.deviceId = this.deviceId;
				const res = await api(this.searchData);
				console.log('res-日志信息', res);
			},

			// 日志
			toLog(type) {
				console.log(type, 'type');
				uni.navigateTo({
					url: '/pages/log/log?type=' + this.type
				})
			},
			// 设备详情
			async deviceDetail(deviceId) {
				const res = await deviceDetailApi(deviceId);
				console.log(res, 'res-设备详情');
				if (res.code === 200) {

					if (res.data.deviceAlarmLog) {
						const parsed = parseJSONSafe(res.data.deviceAlarmLog)
						console.log(parsed, '✅ 转成真正JSON对象')
						res.data.deviceAlarmLogJson = parsed || res.data.deviceAlarmLog
					}
					if (res.data.deviceLevelLog) {
						const parsed = parseJSONSafe(res.data.deviceLevelLog)
						console.log(parsed, '✅ 转成真正JSON对象')
						res.data.deviceLevelLogJson = parsed || res.data.deviceLevelLog
					}
					if (res.data.deviceParameterLog) {
						const parsed = parseJSONSafe(res.data.deviceParameterLog)
						console.log(parsed, '✅ 转成真正JSON对象')
						res.data.deviceParameterLogJson = parsed || res.data.deviceParameterLog
					}
					this.device = res.data;
				}
			},
			goBack() {
				uni.navigateBack();
			},
			openMore() {
				// 可打开更多操作
				console.log('open more');
			},
			fetchDevice() {
				// TODO: 替换为真实接口
				// const res = await getDeviceApi({ id: this.$route.params.id })
				// this.device = res.data
			},
			editDevice() {
				// 跳到编辑页面或弹窗
				uni.navigateTo({
					url: `/pages/myDevices/addDevices?deviceId=${this.device.deviceId}`
				});
			},
			editDeviceParams() {
				// 跳到编辑页面或弹窗
				uni.navigateTo({
					url: `/pages/myDevices/edit?deviceId=${this.device.deviceId}`
				});
			},
			// 删除设备
			confirmDelete(device) {
				uni.showModal({
					title: '删除设备',
					content: `确认删除设备 ${ device.deviceId } 吗？此操作无法撤销。`,
					success: (res) => {
						if (res.confirm) {
							this.deleteDeviceFun()
						}
					}
				})
			},
			deleteDeviceFun() {
				// TODO: 调用删除接口
				deviceDeleteApi(this.device.deviceId).then(res => {
					if (res.code === 200) {
						this.showDelete = false;
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 800);
					}
				})

			}
		}
	};
</script>

<style lang="scss" scoped>
	/* 页面整体 */
	.device-detail-page {
		min-height: 100vh;
		background: #f6f7f8;
		position: relative;
		color: #111;
		padding-bottom: 110rpx;
	}

	/* 顶部 */
	.top-bar {
		height: 88rpx;
		display: flex;
		align-items: center;
		padding: 0 18rpx;
		justify-content: space-between;
		background: transparent;
	}

	.back {
		font-size: 40rpx;
		color: #333;
	}

	.title {
		font-size: 32rpx;
		color: #111;
		font-weight: 600;
	}

	.more {
		font-size: 28rpx;
		color: #999;
	}

	/* 通用卡片样式 */
	.card {
		background: #fff;
		margin: 18rpx 16rpx;
		border-radius: 16rpx;
		padding: 18rpx;
		box-shadow: 0 10rpx 30rpx rgba(20, 30, 50, 0.04);
	}

	/* 概览卡 */
	.overview-card .overview-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12rpx;
	}

	.overview-card .label {
		color: #888;
		font-size: 26rpx;
	}

	.overview-card .id {
		font-size: 28rpx;
		color: #222;
		font-weight: 600;
	}

	.overview-card .right {
		text-align: right;
	}

	.signal {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.signal-icon {
		width: 36rpx;
		height: 24rpx;
	}

	.signal-text {
		font-size: 24rpx;
		color: #666;
	}

	.overview-stats {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.stat {
		flex: 1;
		text-align: center;
	}

	.stat-value {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
		font-size: 28rpx;
		color: #111;
		font-weight: 600;
	}

	.stat-label {
		display: block;
		margin-top: 8rpx;
		font-size: 22rpx;
		color: #888;
	}

	.divider {
		width: 1rpx;
		height: 56rpx;
		background: #f0f0f0;
		margin: 0 8rpx;
	}

	/* 核心卡 */
	.core-card {
		padding-top: 20rpx;
	}

	.core-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.device-visual {
		width: 38%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.device-img {
		width: 110rpx;
		height: 110rpx;
	}

	.core-values {
		width: 55%;
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.kv {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.kv-value {
		font-size: 30rpx;
		color: #0081ff;
		font-weight: 700;
	}

	.kv-label {
		font-size: 22rpx;
		color: #888;
	}

	.core-grid {
		margin-top: 16rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 12rpx;
	}

	.grid-item {
		background: #f9fafb;
		flex: 0 0 calc(33.333% - 8rpx);
		padding: 12rpx;
		border-radius: 10rpx;
		text-align: center;
	}

	.grid-label {
		display: block;
		color: #7b8790;
		font-size: 22rpx;
	}

	.grid-value {
		margin-top: 8rpx;
		font-size: 26rpx;
		color: #111;
		font-weight: 600;
	}

	/* 参数列表卡 */
	.list-card .list-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 6rpx;
	}

	.lh-title {
		font-size: 26rpx;
		color: #111;
		font-weight: 600;
	}

	.lh-sub {
		font-size: 22rpx;
		color: #999;
	}

	.param-list {
		margin-top: 10rpx;
	}

	.param-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 0;
		border-bottom: 1rpx solid #f1f3f5;
	}

	.param-name {
		font-size: 26rpx;
		color: #666;
	}

	.param-note {
		font-size: 22rpx;
		color: #999;
		margin-left: 8rpx;
	}

	.param-value {
		font-size: 26rpx;
		color: #222;
		font-weight: 600;
	}

	/* 备注卡 */
	.remark-card {
		margin-top: 12rpx;
	}

	.remark-title {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 8rpx;
	}

	.remark-text {
		font-size: 24rpx;
		color: #444;
		line-height: 34rpx;
	}

	/* 底部按钮 */
	.bottom-actions {
		position: fixed;
		left: 0rpx;
		right: 16rpx;
		bottom: 0rpx;
		display: flex;
		gap: 16rpx;
		justify-content: center;
		align-items: center;
		background: #fff;
		width: 100%;
		// border: 1rpx solid #000;
		z-index: 9999;
		padding: 20rpx 20rpx 58rpx 20rpx;
		// padding-bottom: 58rpx;
	}

	.btn-outline {
		flex: 1;
		height: 66rpx;
		border-radius: 36rpx;
		background: #fff;
		border: 1rpx solid #e6e6e6;
		color: #666;
		font-size: 26rpx;
	}

	.btn-danger {
		flex: 1;
		height: 66rpx;
		border-radius: 36rpx;
		background: linear-gradient(90deg, #00aaff, #0081ff);
		color: #fff;
		font-weight: 600;
		font-size: 26rpx;
	}

	/* 弹窗内样式 */
	.popup-delete {
		padding: 28rpx;
	}

	.popup-title {
		font-size: 28rpx;
		color: #111;
		font-weight: 600;
		margin-bottom: 12rpx;
	}

	.popup-desc {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 20rpx;
	}

	.popup-actions {
		display: flex;
		gap: 12rpx;
		justify-content: flex-end;
	}

	/* CSS 信号条 */
	.signal-bars {
		display: flex;
		align-items: flex-end;
		gap: 6rpx;
		height: 28rpx;
		/* 总高度，根据需要调整 */
		padding-left: 6rpx;
	}

	/* 每条的基础样式 */
	.signal-bars .bar {
		width: 6rpx;
		background: #e6edf3;
		/* 未激活颜色 */
		border-radius: 3rpx;
		transition: background-color 180ms ease, transform 180ms ease;
		transform-origin: bottom center;
		opacity: 0.95;
	}

	/* 各列高度（从左到右逐渐增高） */
	.signal-bars .b1 {
		height: 8rpx;
	}

	.signal-bars .b2 {
		height: 14rpx;
	}

	.signal-bars .b3 {
		height: 20rpx;
	}

	.signal-bars .b4 {
		height: 26rpx;
	}

	/* 激活颜色（主色） */
	.signal-bars.level-1 .b1,
	.signal-bars.level-2 .b1,
	.signal-bars.level-3 .b1,
	.signal-bars.level-4 .b1 {
		background: #0081ff;
		transform: translateY(0);
	}

	.signal-bars.level-2 .b2,
	.signal-bars.level-3 .b2,
	.signal-bars.level-4 .b2 {
		background: #0081ff;
		transform: translateY(0);
	}

	.signal-bars.level-3 .b3,
	.signal-bars.level-4 .b3 {
		background: #0081ff;
		transform: translateY(0);
	}

	.signal-bars.level-4 .b4 {
		background: #0081ff;
		transform: translateY(0);
	}

	/* 非激活时稍微缩小，增加层次 */
	.signal-bars .bar {
		transform: translateY(6rpx) scaleY(0.92);
	}

	.signal-bars.level-1 .b1 {
		transform: translateY(0) scaleY(1);
	}

	.signal-bars.level-2 .b1,
	.signal-bars.level-2 .b2 {
		transform: translateY(0) scaleY(1);
	}

	.signal-bars.level-3 .b1,
	.signal-bars.level-3 .b2,
	.signal-bars.level-3 .b3 {
		transform: translateY(0) scaleY(1);
	}

	.signal-bars.level-4 .b1,
	.signal-bars.level-4 .b2,
	.signal-bars.level-4 .b3,
	.signal-bars.level-4 .b4 {
		transform: translateY(0) scaleY(1);
	}

	/* 可选：调整在小屏上显示更易读 */
	@media (min-width: 0px) {
		.signal-bars {
			gap: 8rpx;
		}

		.signal-bars .bar {
			width: 7rpx;
			border-radius: 3rpx;
		}
	}

	.green {
		background: #29c26a;
		color: #29c26a;
	}

	.red {
		background: #ff5a5a;
		color: #ff5a5a;
	}

	.orange {
		background: #ff9a3a;
		color: #ff9a3a;
	}

	.dot {
		display: inline-block;
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
	}

	.header-box {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		background: #fff;
		padding: 18rpx 16rpx;
		height: 100rpx;
	}
</style>